<mat-card [ixUiSearch]="searchableElements.elements.list">
  <ix-fake-progress-bar [loading]="isLoading()"></ix-fake-progress-bar>
  <mat-toolbar-row>
    <h3>{{ 'Fibre Channel Ports' | translate }}</h3>

    <div class="actions">
      <ix-search-input1
        [value]="searchQuery()"
        (search)="onSearch($event)"
      ></ix-search-input1>
    </div>
  </mat-toolbar-row>
  <mat-card-content>
    <ix-table
      [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
      [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
    >
      <thead
        ix-table-head
        [columns]="columns()"
        [dataProvider]="dataProvider"
      ></thead>
      <tbody
        ix-table-body
        [columns]="columns()"
        [dataProvider]="dataProvider"
        [isLoading]="isLoading()"
      >
      </tbody>
    </ix-table>
    <ix-table-pager [dataProvider]="dataProvider"></ix-table-pager>
  </mat-card-content>
</mat-card>
